<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Dashboard</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" th:href="@{/AdminLTE/bootstrap/css/bootstrap.min.css}">
    <!-- Font Awesome -->
    <!--    <link rel="stylesheet" th:href="@{https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css}">-->
    <link rel="stylesheet" th:href="@{/AdminLTE/download-cdn-lib/font-awesome.min.css}">
    <!-- Ionicons -->
    <!--    <link rel="stylesheet" th:href="@{https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css}">-->
    <link rel="stylesheet" th:src="@{/AdminLTE/download-cdn-lib/ionicons.min.css}">
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/AdminLTE/dist/css/AdminLTE.min.css}">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" th:href="@{/AdminLTE/dist/css/skins/all-skins.min.css}">
    <!-- iCheck -->
    <link rel="stylesheet" th:href="@{/AdminLTE/plugins/iCheck/flat/blue.css}">
    <!-- jvectormap -->
    <link rel="stylesheet" th:href="@{/AdminLTE/plugins/jvectormap/jquery-jvectormap-1.2.2.css}">
    <!-- Date Picker -->
    <link rel="stylesheet" th:href="@{/AdminLTE/plugins/datepicker/datepicker3.css}">
    <!-- Daterange picker -->
    <link rel="stylesheet" th:href="@{/AdminLTE/plugins/daterangepicker/daterangepicker.css}">
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" th:href="@{/AdminLTE/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css}">
    <!-- jQuery 2.2.3 -->
    <script th:src="@{/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js}"></script>
    <!-- jQuery UI 1.11.4 -->
    <!--<script th:src="@{https://code.jquery.com/ui/1.11.4/jquery-ui.min.js}"></script>-->
    <script th:src="@{/AdminLTE/download-cdn-lib/jquery-ui.min.js}"></script>
    <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
    <script>
        $.widget.bridge('uibutton', $.ui.button);
    </script>
    <!-- Bootstrap 3.3.6 -->
    <script th:src="@{/AdminLTE/bootstrap/js/bootstrap.min.js}"></script>
    <!-- Morris.js charts -->
    <!--<script th:src="@{https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js}"></script>-->
    <!--<script th:src="@{/AdminLTE/plugins/morris/morris.min.js}"></script>-->
    <!-- Sparkline -->
    <script th:src="@{/AdminLTE/plugins/sparkline/jquery.sparkline.min.js}"></script>
    <!-- jvectormap -->
    <script th:src="@{/AdminLTE/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js}"></script>
    <script th:src="@{/AdminLTE/plugins/jvectormap/jquery-jvectormap-world-mill-en.js}"></script>
    <!-- jQuery Knob Chart -->
    <script th:src="@{/AdminLTE/plugins/knob/jquery.knob.js}"></script>
    <!-- daterangepicker -->
    <!--<script th:src="@{https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js}"></script>-->
    <script th:src="@{/AdminLTE/download-cdn-lib/moment.min.js}"></script>
    <script th:src="@{/AdminLTE/plugins/daterangepicker/daterangepicker.js}"></script>
    <!-- datepicker -->
    <script th:src="@{/AdminLTE/plugins/datepicker/bootstrap-datepicker.js}"></script>
    <!-- Bootstrap WYSIHTML5 -->
    <script th:src="@{/AdminLTE/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js}"></script>
    <!-- Slimscroll -->
    <script th:src="@{/AdminLTE/plugins/slimScroll/jquery.slimscroll.min.js}"></script>
    <!-- FastClick -->
    <script th:src="@{/AdminLTE/plugins/fastclick/fastclick.js}"></script>
    <!-- AdminLTE App -->
    <script th:src="@{/AdminLTE/dist/js/app.min.js}"></script>
    <!-- AdminLTE for demo purposes -->
    <script th:src="@{/AdminLTE/dist/js/demo.js}"></script>

    <!--仪表盘数据所需-->
    <!-- online -->
    <script>
        $.get("/admin/system/onlineUser/list", {}, function(r) {
            var length = r.length; //获取在线用户数
            $("#onlineCount").text(length); //显示在页面
        });
    </script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- Content Wrapper. Contains page content -->
<!--<div th:fragment="main" class="content-wrapper">-->
<div th:fragment="main">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            仪表盘
            <small>控制面板</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
            <li class="active">仪表盘</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-aqua">
                    <div class="inner">
                        <h3 th:text="${session.userCount}"></h3>
                        <p>用户总数</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-bag"></i>
                    </div>
                    <a href="/admin/system/user" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-green">
                    <div class="inner">
                        <h3 id="onlineCount"></h3>
                        <p>在线用户</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-stats-bars"></i>
                    </div>
                    <a href="/admin/system/onlineUser" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-yellow">
                    <div class="inner">
                        <h3 th:text="${session.blogArticleCount}"></h3>
                        <p>博客文章</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-person-add"></i>
                    </div>
                    <a href="/admin/blog/blogArticle" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-red">
                    <div class="inner">
                        <h3 th:text="${session.fileCount}"></h3>
                        <p>文件总数</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-pie-graph"></i>
                    </div>
                    <a href="/admin/tool/file" class="small-box-footer">更多信息 <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
</div>

</body>
</html>
